{extend name="public:layout" /}
{block name='title'}{$title}{/block}
{block name='head'}
<link rel="stylesheet" href="/public/plugins/emoji/lib/css/jquery.mCustomScrollbar.min.css"/>
<link rel="stylesheet" href="/public/plugins/swiper/css/swiper.css"/>
<link rel="stylesheet" href="/public/plugins/emoji/dist/css/jquery.emoji.css"/>
<link rel="stylesheet" href="/public/plugins/dropload/dropload.css">
<style>
    .topbar {
        background: #333;
        color: #fff;
        padding: 10px 8px 6px 8px;
    }
</style>
<style>
</style>
{/block}
{block name="body"}
<div class="mcm-head">
    <div class="head-left">
        <a href="javascript:history.back(-1)" class="link">
            <span class="iconfont icon-zuoyou1"></span>
        </a>
    </div>
    <div class="head-title">
        {$title}
    </div>
</div>
<div style="height:50px;"></div>
<div class="circleinfo-list" id="list">
</div>
<div id="page"></div>
{/block}
{block name='js'}
<script src="/public/plugins/dropload/dropload.min.js"></script>
<script src="/public/plugins/template/template.js"></script>
<script type="text/html" id="list-tpl">
    {{ each data as value index }}
    <div class="info-item">
        <div class="thumb">
            <a href="{:url('Public/memberCard')}?member_id={{ value.member_id}}">
                <img src="{{ value.member_avatar}}" alt="">
            </a>
        </div>
        <div class="infobox">
            <a href="{:url('Public/memberCard')}?member_id={{ value.member_id}}" class="name-link">{{ value.member_truename}}</a>
            {{ if value.is_attention}}
            <a href="javascript:;" class="link-action" onclick="setAttention('{{ value.theme_id}}',0,this)">
                取消收藏
            </a>
            {{ else}}
            <a href="javascript:;" class="link-action" onclick="setAttention('{{ value.theme_id}}',1,this)">
                取消屏蔽
            </a>
            {{ /if}}
            <div class="info-text">
                <a href="{:url('Theme/info')}?theme_id={{ value.theme_id}}" class="link"></a>
                <div class="text">{{ #value.theme_name}}</div>
                <a href="javascript:;" class="text-toggle">全文</a>
            </div>
            <div class="info-imgs">
                {{ each value.theme_image as v}}
                <img src="{{ v}}" alt="">
                {{ /each}}
            </div>
            <div class="info-after">
                <div class="date">{{ value.create_time}}</div>
                <div class="source">来自
                    <a onclick="setCircle('{{ value.circle_id}}')" class="link">
                        {{value.circle_name}}
                    </a>
                </div>
            </div>
            <div class="info-comment" id="info-comment{{ value.theme_id}}" {{ if !value.like_list.length&&!value.reply.length}} style="display: none" {{ /if}}>
            <div class="laud-box" id="like{{ value.theme_id}}">
                {{ if value.like_list.length}}
                <img src="/public/home/bus/image/l.png" class="laud-icon" alt="">
                {{ each value.like_list as v}}
                <a href="" class="name-link">{{ v.member_name}}</a>，
                {{ /each}}
                ...
                {{ /if}}
            </div>
            <div class="comtent-info" id="reply{{ value.theme_id}}">
                {{ each value.reply as v}}
                {{ if v.reply_replyid}}
                <p><a href="{:url('Public/memberCard')}?member_id={{ v.member_id }}" class="name-link">{{ v.member_name}}</a><span class="name-reply"></span>回复
                    <a href="#{{ v.reply_replyid}}" class="name-link">{{ v.reply_replyname}}</a>
                    <span class="name-spill">：</span>{{ v.reply_content}}
                </p>
                {{ else}}
                <p id="{{ v.replay_id}}"><a href="{:url('Public/memberCard')}?member_id={{ v.member_id }}" class="name-link">{{ v.member_name}}</a>
                    <span class="name-spill">：</span>{{ v.reply_content}}</p>
                {{ /if}}
                {{ /each}}
                {{ if value.reply.length}}
                <a href="{:url('Theme/info')}?theme_id={{ value.theme_id}}" class="toggle-text">查看详细</a>
                {{ /if}}
            </div>
        </div>
    </div>
    </div>
    {{ /each}}
</script>
<script>
    $(function () {
        // 页数
        var data = {
            page: 0,
            member_id:'{$memberInfo.member_id}',
            type:"{$Request.param.type|default=0}"
        };
        // dropload
        var drop = $('.content').dropload({
            scrollArea: window,
            loadDownFn: function (me) {
                data.page++;
                // 拼接HTML
                var result = '';
                $.ajax({
                    url: "{:url('attention')}",
                    data: data,
                    success: function (res) {
                        if (data.page >= res.last_page) {
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        var html = template('list-tpl', res);
                        $('#list').append(html);
                        me.resetload();
                    },
                    error: function (xhr, type) {
                        layer.open({
                            content: '加载出错'
                            , skin: 'msg'
                            , time: 2 //2秒后自动关闭
                        });
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                        me.resetload();
                    }
                });
            }
        });
    });
    function setAttention(theme_id, type,obj) {
        $.post('{:url("Theme/attention")}',{theme_id:theme_id,type:type},function (res) {
            layer.open({
                content: res.msg
                ,skin: 'msg'
                ,time: 2 //2秒后自动关闭
            });
            if (res.code){
                $(obj).parents('div.info-item').fadeTo("slow", 0.01, function(){
                    $(this).slideUp("slow", function() {
                        $(this).remove();
                    });
                });
            }
        })
    }
</script>
{/block}